<template>
  <div class="basic-layout">
    <el-row :style="{height: `${topEmptyRowHeight}px`}" v-show="topEmptyRow"></el-row>
    <el-row type="flex">
      <el-col :span="4">
      </el-col>
      <el-col :span="16" class="basic-layout-content-min-width">
        <slot></slot>
      </el-col>
      <el-col :span="4">
      </el-col>
    </el-row>
    <el-row :style="{height: `${bottomEmptyRowHeight}px`}" v-show="bottomEmptyRow"></el-row>
  </div>
</template>
<style lang="scss">
</style>
<script>
import { mapState } from 'vuex'
export default {
  /**
   * 页面基础布局
   */
  name: 'BasicLayout',
  props: {
    // 渲染数组
    topEmptyRow: {
      type: Boolean,
      default: false
    },
    topEmptyRowHeight: {
      type: Number,
      default: 20
    },
    bottomEmptyRow: {
      type: Boolean,
      default: false
    },
    bottomEmptyRowHeight: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  watch: {
  },
  methods: {
  },
  mounted () {
  },
  computed: {
    ...mapState({
    })
  }
}
</script>
